﻿@using UsedBookTradeSystem.Models.Entity;
@using UsedBookTradeSystem.Models.Enum;
@{
    ViewData["Title"] = "Detail";
    Layout = "~/Views/Shared/_Layout.cshtml";
    BookInfo bookinfo = ViewBag.BookDetail;
}

<section class="py-5">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-6">
                <!-- PRODUCT SLIDER-->
                <div class="row m-sm-0">
                    <div class="col-sm-2 p-sm-0 order-2 order-sm-1 mt-2 mt-sm-0 px-xl-2">
                        <div class="swiper product-slider-thumbs">
                            
                        </div>
                    </div>
                    <div class="col-sm-10 order-1 order-sm-2">
                        <div class="swiper product-slider" style="width:350px;height:350px;">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide h-auto"><img class="img-fluid" style="width:350px;height:350px;" src="@bookinfo.Picture" alt="..."></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- PRODUCT DETAILS-->
            <div class="col-lg-6">
                <h1>@bookinfo.BookName</h1>
                <p class="text-muted lead">￥@bookinfo.Price</p>
                <p class="text-sm mb-4">@bookinfo.BookDetail</p>
                <form action="/Cart/AddCart" method="post">
                    <input hidden class="form-control border-0 shadow-0 p-0" name="bookId" value="@bookinfo.Id" />
                <div class="row align-items-stretch mb-4">
                    <div class="col-sm-5 pr-sm-0">
                        <div class="border d-flex align-items-center justify-content-between py-1 px-3 bg-white border-white">
                            <span class="small text-uppercase text-gray mr-4 no-select">份数</span>
                            <div class="quantity">
                                    <button type="button" class=" p-0" onclick="downTimes()"><i class="fas fa-caret-left"></i></button>
                                    <input id="time" class="form-control border-0 shadow-0 p-0" type="text" name="time" value="1" required>
                                    <button type="button" class=" p-0" onclick="addTimes()"><i class="fas fa-caret-right"></i></button>
                            </div>
                        </div>
                    </div>
                        <div class="col-sm-3 pl-sm-0"><button type="submit" class="btn btn-dark btn-sm btn-block h-100 d-flex align-items-center justify-content-center px-0">&#160;&#160;放入购物车&#160;&#160;</button></div>
                </div>
                    <input value="@bookinfo.Inventory" id="inventory" hidden />
                </form>
                <ul class="list-unstyled small d-inline-block">
                    <li class="px-3 py-2 mb-1 bg-white text-muted"><strong class="text-uppercase text-dark">作者:</strong><a class="reset-anchor ms-2" >@bookinfo.Author</a></li>
                    <li class="px-3 py-2 mb-1 bg-white text-muted"><strong class="text-uppercase text-dark">书籍类别:</strong><a class="reset-anchor ms-2" href="/Home/Shop/?CategoryId=@bookinfo.Category.Id">@bookinfo.Category.CategoryName</a></li>
                    <li class="px-3 py-2 mb-1 bg-white text-muted"><strong class="text-uppercase text-dark">出版社:</strong><a class="reset-anchor ms-2" >@bookinfo.Press</a></li>
                    <li class="px-3 py-2 mb-1 bg-white text-muted"><strong class="text-uppercase text-dark">规格:</strong><a class="reset-anchor ms-2">@bookinfo.Bookspecs</a></li>
                    <li class="px-3 py-2 mb-1 bg-white text-muted"><strong class="text-uppercase text-dark">库存:</strong><a class="reset-anchor ms-2">@bookinfo.Inventory</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>


<script>
    const inputElement = document.getElementById('time');

    function restrictInput(event) {
        // 获取当前输入值
        let currentValue = inputElement.value.replace(/^0+(?=[1-9])/, '');
        let maxValue = Number(document.getElementById('inventory').value);
        if (/^\d+$/.test(currentValue) && parseInt(currentValue, 10) > 0) {
            if (currentValue > maxValue) {
                document.getElementById('time').value = maxValue;
            }
        }
        else {
            document.getElementById('time').value = ''
        }

    }
    function downTimes() {
        let currentValue = parseInt(document.getElementById('time').value.replace(/^0+(?=[1-9])/, ''), 10); // 获取当前值并转换为整数
        let minValue = 1; // 设置最小值，可以根据需要调整

        // 检查当前值是否有效且大于最小值
        if (!isNaN(currentValue) && currentValue > minValue) {
            // 减少当前值
            document.getElementById('time').value = currentValue - 1;
        } else {
            // 如果当前值无效或已经达到最小值，则不做任何操作或显示错误消息
            document.getElementById('time').value = 1;
            // 如果需要，可以在这里添加逻辑来显示一个提示或错误消息给用户
        }
    }
    function addTimes() {
        let currentValue = parseInt(inputElement.value, 10); // 确保转换为整数
        let maxValue = parseInt(document.getElementById('inventory').value, 10); // 确保转换为整数
        console.log('Current value:', currentValue);
        console.log('Max value:', maxValue);

        if (!isNaN(currentValue) && !isNaN(maxValue)) { // 检查值是否都是数字
            if (currentValue >= maxValue) { // 使用 >= 来确保当值等于最大值时不再增加
                document.getElementById('time').value = maxValue;
            } else {
                document.getElementById('time').value = currentValue + 1;
            }
        } else {
            console.error('Invalid values for current or max value');
        }
    }
    // 监听输入框的输入事件
    inputElement.addEventListener('input', restrictInput);
</script>
